<script setup lang='ts' name="swiper">
import { useOpen } from '@/pages/home/component/use-open'
import { useGetHomeCategory } from '@fl/api/man-api'
import { cloneDeep } from 'lodash-es'
import { toRefs } from 'vue'

import Category from './category.vue'
import CategoryExpan from './category-expan.vue'

const props = defineProps<{
    data: any
}>()

const { openNewWindow } = useOpen()

const show = ref(false)
const { data } = toRefs(props)
const res: any = useGetHomeCategory()

const expandData = ref<any>({})

const opts = computed(() => {
    return res.data.value?.map((v: any) => {
        return {
            ...v,
            active: false,
        }
    })
})

function goTo(item: any) {
    if (item?.url) {
        window.open(item.url, '_block')
    }
}

function itemEnter(isShow: boolean, item: any) {
    expandData.value = cloneDeep(item)
    show.value = isShow
}

// 类目 跳到搜索结果页
function itemClick(item?: any) {
    const { children, ...rest } = item
    openNewWindow('/search', { ...rest }, '_self')
}

const options = {
    autoplay: true,
    interval: 5000,
    rewind: true,
    type: 'fade',
}
</script>

<template>
    <div class="home-swiper mx-auto flex relative w-1300 justify-between">
        <!-- 一级类目属性太多 屏蔽 -->
        <!-- <Category :opts="opts" @item-enter="itemEnter" @item-click="itemClick" /> -->
        <Category :opts="opts"
                  @item-enter="itemEnter"
        />

        <CategoryExpan v-show="show"
                       :data="expandData"
                       @item-click="itemClick"
        />

        <div v-if="data?.items?.length"
             class="swiper mb-39 h-560 w-1068 z-0"
        >
            <Splide :options="options"
                    aria-label="My Favorite Images"
            >
                <SplideSlide v-for="item in data?.items"
                             :key="item.id"
                >
                    <img class="rounded-4 h-560 w-full cursor-pointer"
                         :src="item.img"
                         :alt="item.name"
                         @click="goTo(item)"
                    >
                </SplideSlide>
            </Splide>
        </div>
    </div>
</template>

<style lang="less" scoped>
// !!! 此类名不可以去掉 子组件有绑定事件
.home-swiper {
    margin-top: 20px;
}
</style>
